@if (loading) {
  <div class="wrapper">
    <div class="loading">Loading ...</div>
  </div>
}

@if (error) {
  <div class="wrapper">
    <h3>Could not load API information</h3>
    <div class="error">{{ error }}</div>
  </div>
}

@if (!loading && !error) {
  <div class="wrapper">
    @if (client.document|async; as apiDocument) {
      <div class="description text-selection">
        <markdown [data]="apiDocument.markdown"></markdown>
      </div>
    }
    <div class="routes">
      @for (route of filteredRoutes; track $index; let i = $index) {
        @if (groupBy === 'controller') {
          @if (!filteredRoutes[i - 1] || filteredRoutes[i - 1].controller !== route.controller) {
            <div class="title">
              {{ route.controller }}
            </div>
          }
        }
        @if (groupBy === 'method') {
          @if (!filteredRoutes[i - 1] || filteredRoutes[i - 1].httpMethods[0] !== route.httpMethods[0]) {
            <div class="title">
              {{ route.httpMethods[0] }}
            </div>
          }
        }
        <div class="text-selection route" (click)="showDetails[route.id] = !showDetails[route.id]">
          <div class="title">
            <div class="path">{{ route.path }}</div>
            @for (m of route.httpMethods; track $index) {
              <div class="method text-light {{m}}"
                >{{ m }}
              </div>
            }
          </div>
          @if (route.description) {
            <div class="description">
              {{ route.description }}
            </div>
          }
        </div>
        @if (showDetails[route.id]) {
          <div class="route-details">
            <div class="actions">
              <dui-button routerLink="/api/console" [queryParams]="{view: 'http', route: route.id}">Open console</dui-button>
            </div>
            <div class="box" style="padding: 10px;">
              <div class="labeled-values">
                <div>
                  <label>Category</label>
                  {{ route.category || 'none' }}
                </div>
                <div>
                  <label>Groups</label>
                  {{ route.groups.join(',') || 'none' }}
                </div>
                <div style="margin-top: 10px; flex: 2 1 auto;">
                  <label>Description</label>
                  <div class="formatted-text">{{ route.description || 'none' }}</div>
                </div>
              </div>
            </div>
            @if (route.getUrlType(); as schema) {
              <div class="box" style="margin-top: 5px; padding-top: 0;">
                <div class="box-title">
                  <div>URL</div>
                </div>
                <div class="ts text-selection" style="margin-top: 10px">
                  <code-highlight [code]="typeToTSJSONInterface(schema.type, {defaultIsOptional: true})"></code-highlight>
                </div>
              </div>
            }
            <div class="box" style="margin-top: 5px; padding-top: 0;">
              <div class="box-title">
                <div>Query</div>
              </div>
              @if (!route.getQueryType()) {
                <div class="box-info-text">This route has no query parameters defined.</div>
              }
              @if (route.getQueryType(); as schema) {
                <div class="ts text-selection" style="margin-top: 10px">
                  <code-highlight [code]="typeToTSJSONInterface(schema.type, {defaultIsOptional: true})"></code-highlight>
                </div>
              }
            </div>
            <div class="box" style="margin-top: 5px; padding-top: 0;">
              <div class="box-title">
                <div>Body</div>
              </div>
              @if (!route.getBodyType()) {
                <div class="box-info-text">This route has no body defined.</div>
              }
              @if (route.getBodyType(); as schema) {
                <div class="ts text-selection" style="margin-top: 10px">
                  <code-highlight [code]="typeToTSJSONInterface(schema.type, {defaultIsOptional: true})"></code-highlight>
                </div>
              }
            </div>
            @if (route.responses.length || route.getResultType()) {
              <div class="responses-title">
                Available response types
              </div>
            }
            @if (route.getResultType(); as schema) {
              <div class="box">
                <div class="box-title">
                  <div>Default response</div>
                </div>
                <div class="ts text-selection">
                  <code-highlight [code]="typeToTSJSONInterface(schema)"></code-highlight>
                </div>
              </div>
            }
            @for (response of route.responses; track $index) {
              <div class="box">
                <div class="box-title">
                  <div>Response {{ response.statusCode }} {{ headerStatusCodes[response.statusCode + ''] }}</div>
                </div>
                <div class="response-description">
                  {{ response.description }}
                </div>
                @if (response.getType(); as s) {
                  <div class="ts text-selection">
                    <code-highlight [code]="typeToTSJSONInterface(s)"></code-highlight>
                  </div>
                }
              </div>
            }
          </div>
        }
      }
    </div>
  </div>
}
